<template>
  <div class="page-wrap">
    <!--<view class="status_bar">-->
    <!--&lt;!&ndash; 这里是状态栏 &ndash;&gt;-->
    <!--</view>-->
    <!--<div class="control flex">-->
    <!--<fun-icons color="#81ce69" class="icon iconsetting" name="iconsetting" size="22"></fun-icons>-->
    <!--<fun-icons color="#81ce69" class="icon iconemail" name="iconemail" size="22"></fun-icons>-->
    <!--</div>-->
    <div class="userinfo flex">
      <div class="headimgbox">
        <image class="headimg" :src="userInfo.headimg"/>
      </div>
      <div v-if="userInfo.id" class="info flex1">
        <div class="nickname line10">{{userInfo.nickname}}</div>
        <div class="cashing_money line6">可用积分 <span class="price">{{extInfo.points_num}}</span></div>
        <!--<div class="birthday">提现中金额{{extInfo.freeze_money}} 累计提现 {{extInfo.cashed_money}}</div>-->
      </div>
      <div>
        <button v-if="!is_check" size="mini" @click="toPoints" class="withdraw-btn">积分商城</button>
      </div>
    </div>

    <div class="tabs">
      <div class="tab-item" @click="activeTabIndex=0">
        <div class="content">
          <div class="title">获得记录</div>
          <div v-show="activeTabIndex==0" class="underline"></div>
        </div>
      </div>
      <div class="tab-item" @click="activeTabIndex=1">
        <div class="content">
          <div class="title">使用记录</div>
          <div v-show="activeTabIndex==1" class="underline"></div>
        </div>
      </div>
    </div>

    <div class="container m-10" v-show="activeTabIndex==0">
      <div class="item fz-12" v-for="(item,idx) in addList" :key="idx">
        <div class="row flex flex-justify-between">
          <div class="c9 ">变更类型</div>
          <div class="color-green">{{item.type_text}}</div>
        </div>
        <div class="row flex flex-justify-between">
          <div class="c9">变动数量</div>
          <div class="color-red">+{{item.number}}</div>
        </div>
        <div class="row flex flex-justify-between">
          <div class="c9">描述</div>
          <div class="c6" style="width: 400rpx;overflow: hidden;text-align: right">{{item.content}}</div>
        </div>
        <div class="row flex flex-justify-between">
          <div class="c9">变动时间</div>
          <div class="c6">{{item.create_at}}</div>
        </div>
      </div>
    </div>

    <div class="container m-10" v-show="activeTabIndex==1">
      <div class="item fz-12" v-for="(item,idx) in minusList" :key="idx">
        <div class="row flex flex-justify-between">
          <div class="c9">变更类型</div>
          <div class="color-green">{{item.type_text}}</div>
        </div>
        <div class="row flex flex-justify-between">
          <div class="c9">变动金额</div>
          <div class="color-red">-{{item.number}}</div>
        </div>
        <div class="row flex flex-justify-between">
          <div class="c9">描述</div>
          <div class="c6" style="width: 400rpx;overflow: hidden;text-align: right">{{item.content}}</div>
        </div>
        <div class="row flex flex-justify-between">
          <div class="c9">变动时间</div>
          <div class="c6">{{item.create_at}}</div>
        </div>
      </div>

    </div>

  </div>
</template>

<script>

import { mapActions, mapGetters } from 'vuex'

import { flashUserInfo, getUserPointLog } from '@/api'
import { pageMixin } from '@/mixins'

export default {
  mixins: [pageMixin],
  components: {},
  data () {
    return {
      activeTabIndex: 0,
      addList: [],
      minusList: [],
      extInfo: {
        points_num: 0,
        freeze_money: 0,
        cashed_money: 0,
        cashing_money: 0
      }
    }
  },
  methods: {
    toPoints () {
      uni.navigateTo({
        url: '/pages/points/shop'
      })
    },
    toDistributor () {
      uni.navigateTo({
        url: '/pages/distributor'
      })
    },
    toVip () {
      uni.navigateTo({
        url: '/pages/user/vip'
      })
    },
    toProfile () {
      uni.navigateTo({
        url: '/pages/user/profile'
      })
    },
    toLogin () {
      uni.navigateTo({
        url: '/pages/user/login'
      })
    },
    async init () {
      await flashUserInfo({ type: 'ext' }, { tip: '' }).then(res => {
        this.extInfo = res.data
      })
      await getUserPointLog({
        size: 999,
        action: 1
      }).then(res => {
        this.addList = res.data.list
      })

      await getUserPointLog({
        size: 999,
        action: -1
      }).then(res => {
        this.minusList = res.data.list
      })
    },
    ...mapActions(['setUserInfo'])
  },
  onLoad (options) {
    console.log(22)
    if (options.hasOwnProperty('idx')) {
      this.activeTabIndex = Number(options.idx)
    }
  },
  onShow () {
    this.init()
  },

  computed: {
    userInfo () {
      return this.$store.getters['user/getUserInfo']()
    }

  }
}
</script>

<style lang="scss" scoped="scoped">
  .withdraw-btn {
    background: $fun-primary-color;
    color: white;
  }

  .page-wrap {
    background: #f8f8f8;
    padding-bottom: 50px;

  }

  .control {
    justify-content: space-between;
    padding: 20rpx 40rpx;
  }

  .userinfo {
    padding: 25rpx;
    align-items: center;

    .headimgbox {
      .headimg {
        width: 124rpx;
        height: 124rpx;
        border-radius: 50%;
      }
    }

    .info {
      padding: 20rpx 0 20rpx 20rpx;

      .tip {
        font-size: 36rpx;
        line-height: 48rpx;
        font-weight: 500;
        color: #333;
      }

      .tipsmall {
        font-size: 28rpx;
        line-height: 40rpx;
        color: #777;
      }

      .nickname {
        line-height: 48rpx;
        font-size: 36rpx;
        font-weight: 500;
      }

      .cashing_money {
        color: #777;
        font-size: 32rpx;
        line-height: 40rpx;
      }

      .birthday {
        color: #777;
        font-size: 28rpx;
        line-height: 40rpx;

        .level {
          margin-left: 10px;
          font-size: 12px;
          padding: 0 4px;
          display: inline-block;
          background: #f4b93f;
          border-radius: 4px;
          color: white;

          &.active {
            background: $fun-primary-color;
          }
        }
      }
    }
  }

  .tabs {
    display: flex;
    padding: 15px 0 10px;

    .tab-item {
      flex: 1;
      color: #444;

      .content {
        width: 80px;
        margin: 0 auto;

        .title {
          text-align: center;
          padding-bottom: 10px;
        }

        .underline {
          background: $fun-primary-color;
          height: 4px;
          border-radius: 2px;
          width: 20px;
          margin: 0 auto;
        }

      }
    }
  }

  .container {
    font-size: 14px;
    background: transparent;

    .item {
      background: white;
      margin-bottom: 15px;
      padding: 10px;
      border-radius: 4px;

      .row {
        padding: 6px 0;
      }
    }
  }
</style>
